<template>
  <div>
    <el-table height="100px" v-adaptive :data="tableData">
      <el-table-column prop="token" label="序号" type="index" width="60">
      </el-table-column>
      <el-table-column prop="partNumber" label="零件号"> </el-table-column>
      <!-- partName processName -->
      <el-table-column prop="processName" label="零件名称"> </el-table-column>
      <el-table-column prop="processNumber" label="工序号"> </el-table-column>
      <el-table-column prop="processName" label="工序名称"> </el-table-column>
      <el-table-column prop="code" label="模板" width="180">
        <template slot-scope="scope">
          {{
            scope.row.technologyTemplate && scope.row.technologyTemplate.name
          }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <span :style="scope.row.state == 'false' ? 'color: #999999;' : ''">
            {{ formatState(scope.row.state) }}
          </span>
        </template></el-table-column
      >
      <el-table-column prop="code" label="创建时间" width="160">
        <template slot-scope="scope">
          {{ scope.row.createdDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="author" label="创建人"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <div class="btns_box">
            <!-- 预览 -->
            <img
              @click="openStatus(scope.row.token)"
              src="@/assets/images/yulan.png"
              alt=""
            />
            <!-- 禁用 -->
            <img
              @click="handDisable(scope.row)"
              src="@/assets/images/disable.png"
              style="margin: 0 16px"
              alt=""
            />
            <!-- 启动 -->
            <img
              src="@/assets/images/qidong.png"
              alt=""
              @click="handleSta(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="invocationCount" label="使用次数">
      </el-table-column>
    </el-table>
    <FormulaDetails
      :tableData="formulaTableData"
      :formulaParameter="formulaParameter"
      :deviceToken="deviceToken"
      :formulaShow.sync="formulaShow"
      :form="formulaDetails"
      @handleClose="handleClose"
    >
    </FormulaDetails>
    <Pagination
      @pagination="pagination"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      :pageSizes.sync="pageSizes"
    />
    <el-dialog
      title="预览"
      close-on-press-escape
      v-dialogDrag
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="showDialog"
      width="750px"
      @close="showDialog = false"
    >
      <!-- <Pdfpage :src="src" :name="name" ref="pdf"></Pdfpage> -->
      <iframe
        v-init-screen-h="50"
        style="width: 100%"
        :src="src"
        frameborder="0"
      ></iframe>
      <!-- <pdf id="printTab" :src="src" ref="pdf"></pdf> -->
    </el-dialog>
  </div>
</template>

<script>
import { getFormulass, getFormulaToken, editFormula } from "@/api/technology";
// import pdf from "vue-pdf-signature";
import { paginationMixins } from "@/mixin/pagination";
// import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory";
import FormulaDetails from "./formulaDetails.vue";
import _ from "lodash";
export default {
  mixins: [paginationMixins],
  props: {
    deviceTypeToken: {
      type: String
    },
    deviceToken: {
      type: String
    }
  },
  components: {
    //  pdf,
    FormulaDetails
  },
  computed: {
    formatState() {
      return function(data) {
        console.log("data :>> ", data);
        if (data == "true") {
          return "可用";
        } else if (data == "false") {
          return "禁用";
        }
      };
    }
  },
  data() {
    return {
      formulaDetails: {},
      editShow: true,
      formulaTableData: [],
      total: 0,
      showDialog: false,
      src: "",
      formulaShow: false,
      tableData: [],
      formulaParameter: [],
      hhhh: window.innerHeight,
      name: ""
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    handleSta(item) {
      this.formulaShow = true;
      let cloneItem = _.cloneDeep(item);
      this.formulaParameter = cloneItem.formulaParameter;
      this.formulaDetails = cloneItem;
    },
    async handDisable(row) {
      if (row.state == "true") {
        await editFormula(
          {
            ...row,
            state: "false"
          },
          row.token
        );
        this.init();
        this.$msg({
          type: "success",
          message: "禁用成功!"
        });
      } else {
        // this.$msg("已处于禁用状态");
        await editFormula(
          {
            ...row,
            state: "true"
          },
          row.token
        );
        this.init();
        this.$msg({
          type: "success",
          message: "启用成功!"
        });
      }
    },
    openStatus(token) {
      this.showDialog = true;
      getFormulaToken(token, true)
        .then(res => {
          const { data } = res;
          const token1 = `${data.partNumber}_${data.entrustProcessNumber}_${data.processNumber}_${data.version}`;
          this.src = `${process.env.VUE_APP_JIMU_URL}/jmreport/view/${data.reportId}?token2=${data.token}&token1=${token1}=&Authorization=Bearer ${this.$store.state.user.accessToken}`;
          this.name = data.name;
        })
        .catch(err => {
          this.$msg("pdf转换失败");
        });
    },
    handleClose(isRefresh) {
      this.formulaShow = false;
      if (isRefresh) {
        this.init();
      }
    },
    init() {
      this.loading = true;
      this.params = {
        page: this.pageNum,
        pageSize: this.pageSize,
        includeTemplate: true,
        includeTechnology: true,
        deviceToken: this.deviceToken,
        includeInvocationCount: true
      };
      getFormulass(this.params)
        .then(r => {
          const { data } = r;
          this.total = data.numResults;
          data.results.forEach(item => {
            item.partName =
              item.technologyParameter.find(item => item.key == "零件名称")
                ?.value || "";
            item.processName =
              item.technologyParameter.find(item => item.key == "工序名称")
                ?.value || "";
          });

          this.tableData = data.results;
          this.$forceUpdate();
        })
        .finally(f => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.btns_box {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.statusDiv {
  width: 14px;
  height: 14px;
  // background-color: red;
  float: left;
  border-radius: 3px;
  margin: 4px 10px 0px -7px;
  z-index: 9999;
}
</style>
